<script setup>
import { ref, reactive, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted,getCurrentInstance} from "vue"
import Sortable from 'sortablejs' 
import {diagSort } from '@/api/ShopDatabase/goodsSetting.js'
const instance = getCurrentInstance();
const emit = defineEmits(['handleEdit','sortSubmit'])

const props = defineProps({
    tableDataChild:{
        type:Array,
        default:() => ([])
    }
})


// 表格隔行变色
const tableRowClassName = ({ row, rowIndex }) => {
    // console.log(row,rowIndex,'row,rowIndex');
      if (rowIndex % 2 === 0) {
        return 'event-row' //这是类名
      } else  {
        return 'odd-row'
      }
    }

const tableRefIds = ref(null)
const getRandomId = ()=>{
  tableRefIds.value =  `table${parseInt(Math.random() * 1000000)}s`;
}
getRandomId();



// 拖拽实现
const rowDrop = ()=>{
   
  //  const tbody = document.querySelector(`#${tableRefIds.value}`)
  const tbody = document.querySelector(`#${tableRefIds.value} .el-table__body-wrapper .el-table__body tbody`)
   Sortable.create(tbody, {
     onEnd({ newIndex, oldIndex }) {
        // emit('drawHandle',newIndex,oldIndex)
        console.log('pppppp');
        drawHandle(newIndex,oldIndex)
     }
   })
};




// 编辑弹框
const handleEdit = (index,row) => {
    emit('handleEdit',index,row)
}

onMounted(() => {
  rowDrop();
})



// 删除逻辑
const handleDelete = (index,row) => {
  emit('handleDelete',row)
}

let sortId = ref(0)
const drawHandle = async (newIndex,oldIndex)=>{
    if(newIndex!== oldIndex){
      try{
        // tableLoading.value = true;
        let idList = props.tableDataChild.map(item =>{
          return {
              id:item.id,
              diagnosisValue:item.diagnosisValue,
              sortValue:0
            }
        })
        // console.log(idList,'return');
        // return
        const oldValue = idList[oldIndex]
        idList.splice(oldIndex, 1)
        idList.splice(newIndex, 0, oldValue)

        emit('sortSubmit',idList)
        sortId.value++
        instance.proxy.$forceUpdate()
      }finally{

      }
    }
 }


//组件挂载到节点上之前执行的函数
onBeforeMount(()=>{})

//组件挂载完成后执行的函数
onMounted(()=>{})

//组件更新之前执行的函数
onBeforeUpdate(()=>{})

//组件更新完成之后执行的函数
onUpdated(()=>{
  rowDrop();
})

//组件卸载之前执行的函数
onBeforeUnmount(()=>{})

//组件卸载完成后执行的函数
onUnmounted(()=>{})

</script>

<template>
  <div class="">

    <el-table  
        :key="sortId"
        :id="tableRefIds"
        :show-header="false"
        :row-key="tableRefIds"
        :row-class-name="tableRowClassName"
        :data="tableDataChild" style="width: 100%">
        <el-table-column prop="" label=""  />
        <el-table-column prop="" label=""  width="40"/>
        <el-table-column prop="" label=""  width="300"/>
        <el-table-column prop="diagnosisValue" label="" />
        <el-table-column prop="" label="" width="300">
            <template #default="scope">
                <el-button
                    size="small"
                    @click="handleEdit(scope.$index, scope.row)"
                    plain
                    type="success" 
                >编辑</el-button
                >
                <el-button
                size="small"
                type="danger"
                plain
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button 
                >
            </template>
        </el-table-column>
    </el-table>

  </div>
</template>

<style lang="less" scoped></style>
